<!--
 * @Author: yang_jl@ecidi.com
 * @Date: 2020-03-09 09:42:23
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2022-04-13 14:29:05
 * @Description: 岗位管理
 -->
<template>
  <div class="post-container">
    <drawer-layout left-width="60%">
      <template v-slot:left="{ setFolded }">
        <fks-query-page
          ref="post"
          v-loading="loading"
          :data="postData"
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          row-key="id"
          :current-row-key="currentRowKey"
          :highlight-current-row="true"
          :element-loading-text="LANG.LOADING"
          :table-name="LANG.POSITION_LIST"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
          @query="getPost"
          @sort-change="sortHandler"
        >
          <template slot="singleSearch">
            <div class="single-searchBox">
              <fks-input
                v-model="searchPostName"
                :placeholder="LANG.POSITION_NAME"
                class="single-searchBox-item"
                clearable
                maxlength="50"
                @clear="search"
                @keyup.enter.native="search"
              >
                <fks-button
                  slot="append"
                  icon="fks-icon-search"
                  @click="search"
                />
              </fks-input>
              <fks-button
                v-permission="['position:import']"
                @click="importData"
              >
                <i class="fks-icon-import" />
                <span>{{ LANG.IMPORT }}</span>
              </fks-button>
              <fks-button
                v-permission="['position:export']"
                @click="exportData"
              >
                <i class="fks-icon-export" />
                <span>{{ LANG.EXPORT }}</span>
              </fks-button>
              <fks-button
                v-permission="['position:add']"
                type="primary"
                icon="fks-icon-plus"
                @click="addPost"
              >
                <span> {{ LANG.ADD }}</span>
              </fks-button>
            </div>
          </template>
          <template>
            <fks-table-column type="selection" width="55" />
            <fks-table-column
              type="index"
              align="center"
              label="#"
              width="55"
            />
            <fks-table-column
              :label="LANG.NAME"
              prop="postName"
              sortable="custom"
              min-width="150"
              is-link
              align="left"
              header-align="center"
              @link="viewHandler"
            />
            <fks-table-column
              prop="memberNum"
              :label="LANG.MEMBERNUMBER"
              align="center"
            />
            <fks-table-column
              type="wide"
              prop="remark"
              :label="LANG.REMARK"
              min-width="200"
            />
            <fks-table-column :label="LANG.OPERATION" width="200" align="left">
              <template slot-scope="scope">
                <fks-button
                  v-permission="['position:edit']"
                  type="text"
                  @click="handleEdit(scope.row)"
                >
                  {{ LANG.EDIT }}
                </fks-button>
                <fks-button
                  v-permission="['position:delete']"
                  type="text"
                  danger-text
                  @click="deletePosts(scope.row)"
                >
                  {{ LANG.DELETE }}
                </fks-button>
              </template>
            </fks-table-column>
          </template>
        </fks-query-page>
      </template>
      <template #right>
        <member-table
          :post-id.sync="postId"
          :post-name="postName"
          :loading.sync="loading"
          @refresh="getPost"
        />
      </template>
    </drawer-layout>

    <role-group-detail
      :visible.sync="visible"
      :data="node"
      :post-type="postType"
    />
    <role-group-edit :visible.sync="editVisible" :data="node" />
    <import-position
      :visible.sync="importVisible"
      :flag="importFlag"
      @fetchData="getPost"
    />
  </div>
</template>
<script>
import * as Auth from "./api";
import RoleGroupDetail from "./RoleGroupDetail";
import RoleGroupEdit from "./RoleGroupEdit";
import importPosition from "@/modules/System/User/Import";
import * as types from "@/store/Getter/getterTypes.js";
import { exportFile } from "@/utils/file";
import DrawerLayout from "@/components/DrawerLayout";
import Mix from "@/mixins/module";
import memberTable from "./MemberTable";
export default {
  name: "Position",
  components: {
    RoleGroupDetail,
    RoleGroupEdit,
    importPosition,
    DrawerLayout,
    memberTable,
  },
  mixins: [Mix],
  data() {
    return {
      importFlag: "post",
      postData: [],
      listLoading: false,
      loading: true,
      currentPage: 1,
      pageSize: 20,
      total: 0,
      visible: false,
      memberVisible: false,
      editVisible: false,
      node: {},
      sort: "",
      columnName: "",
      postType: "",
      postName: "",
      searchPostName: "",
      importVisible: false,
      exportPost: [],
      postId: "",
      currentKey: "",
      currentRowKey: "",
    };
  },
  computed: {
    type() {
      return this.$store.state.portal.type;
    },
    portalId() {
      return this.$store.state.portal.id;
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL];
    },
  },
  watch: {},
  created() {
    this.getPost();
  },
  methods: {
    rowClick(row) {
      this.postId = row.id;
      this.postName = row.postName;
      this.currentRowKey = row.id;
    },
    viewHandler({ row }) {
      this.postId = row.id;
      this.postName = row.postName;
    },
    handleSelectionChange() {
      this.exportPost = this.$refs.post.$refs.table.selection;
    },
    importData() {
      this.importVisible = true;
    },
    //导出数据
    exportData() {
      let exportPostIdList = [];
      if (this.exportPost.length > 0) {
        this.exportPost.forEach((item) => {
          exportPostIdList.push(item.id);
        });
      }
      Auth.exportPost(exportPostIdList, {
        exportAll: this.exportPost.length == 0,
      })
        .then((res) => {
          if (res.request.response.type == "application/json") {
            let fileReader = new FileReader();
            fileReader.readAsText(res.data);
            let that = this;
            fileReader.onload = function (result) {
              let jsondata = JSON.parse(result.target.result);
              if (jsondata.status) {
                that.$message.success(that.LANG.EXPORT_SUCCESS);
              } else {
                that.$message.error(that.LANG.EXPORT_FAILED);
              }
            };
          } else {
            // 'application/vnd.ms-excel'
            exportFile(res);
            this.$message.success(this.LANG.EXPORT_SUCCESS);
          }
        })
        .catch(() => {});
    },
    //列表排序方法
    sortHandler(data) {
      let params = {};
      if (!data.order) {
        this.sort = "";
        this.columnName = "";
      } else {
        this.sort = data.order == "ascending" ? "asc" : "desc";
        this.columnName =
          data.prop == "searchPostName" ? "post_name" : "post_code ";
      }
      params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        portalId: this.portalId,
        searchValue: this.searchPostName,
        sort: this.sort,
        columnName: this.columnName,
        needMemberNum: true,
      };
      this.getPostList(params);
    },
    //搜索项清空方法
    search() {
      this.currentPage = 1;
      this.getPost();
    },
    //获取岗位列表数据
    getPost() {
      let params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        searchValue: this.searchPostName,
        portalId: this.portalId,
        sort: this.sort,
        columnName: this.columnName,
        needMemberNum: true,
      };
      this.getPostList(params);
    },
    //获取岗位列表数据
    @permission("position:query")
    getPostList(params) {
      this.loading = true;
      Auth.getPost(params)
        .then((res) => {
          this.loading = false;
          if (res.status && res.data.list.length > 0) {
            this.postData = res.data.list;
            this.total = res.data.total;
            if (!this.currentRowKey) {
              this.postName = res.data.list[0].postName;
              this.postId = res.data.list[0].id;
              this.currentRowKey = res.data.list[0].id;
            }
          }
        })
        .catch(() => {
          this.loading = false;
          this.postData = [];
          this.total = 0;
        });
    },
    //管理岗位内成员
    handleMember(row) {
      this.node = Object.assign({}, row);
      this.memberVisible = true;
    },
    //管理岗位内角色
    roleGroupEdit(row) {
      this.node = Object.assign({}, row);
      this.editVisible = true;
    },
    //编辑岗位
    handleEdit(row) {
      this.node = Object.assign({}, row);
      this.postType = "edit";
      this.visible = true;
    },
    //新增岗位
    addPost() {
      this.postType = "add";
      this.node = {};
      this.visible = true;
    },
    //删除岗位
    deletePosts(row) {
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS,
        type: "warning",
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: "fks-button--danger",
        deleteMode: true,
      })
        .then(() => {
          Auth.deletePost(row.id)
            .then((res) => {
              if (res.status) {
                if (this.currentPage != 1) {
                  this.currentPage = 1;
                }
                this.$message.success(this.LANG.DELETE_SUCCESS);
                this.getPost();
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>
<style  lang="scss" scoped>
.post-container {
  min-width: 552px;
  height: 100%;
  background: #f1f2f6;
  ::v-deep .right {
    width: calc(40% - 8px) !important;
    margin-left: 8px;
  }
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>